<template>
    <div>
       <h3>订单</h3>
       <Breadcrumb :breadcrumba="breadcrumba" :breadcrumbb="breadcrumbb"></Breadcrumb>
       <el-card>
           <el-row>
                <el-col :span="6">
                    <div>
                        <el-input placeholder="请输入内容" v-model="query">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
           </el-row>
            
           <!-- 表格 -->
             <el-table
            :data="orderList"
            stripe
            border
            header-align="center"
            style="width: 100%">
            <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center">
            </el-table-column>
            <el-table-column
                prop="order_number"
                label="订单编号"
               width="380">
            </el-table-column>
            <el-table-column
                prop="order_price"
                label="订单价格"
                align="center"
                width="80">
            </el-table-column>
            <el-table-column
                prop="pay_status"
                label="是否付款"
                align="center"
                width="120">
                 <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
                    <el-tag type="danger" else>未付款</el-tag>
                 </template>
            </el-table-column>
            <el-table-column
                prop="is_send"
                label="是否发货"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="下单时间"
                align="center"
                >
                <template slot-scope="scope">
                    {{scope.row.create_time | formatDate}}
                </template>
            </el-table-column>
                
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="修改地址" placement="top" :enterable="false">
                         <el-button type="primary" icon="el-icon-edit" @click="orderEditor(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="物流信息" placement="top" :enterable="false">
                        <el-button type="success" icon="el-icon-location" @click="showProgressBox(scope.row)"></el-button>
                    </el-tooltip>
                     
                </template>
            </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ordersInfo.pagenum"
            :page-sizes="[1, 5, 10, 15]"
            :page-size="ordersInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
       </el-card>

       <!-- 弹出框 修改地址的 -->
       <el-dialog
        title="修改地址"
        :visible.sync="showBox"
        width="50%"
        @close="addressDialogClose">
        <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="省市区/县" prop="address1">
                <!-- <el-input v-model="addressForm.address1"></el-input> -->
                <!-- 级联选择器 -->
                <el-cascader :options="cityDate"  :props="{ expandTrigger: 'hover' }" clearable filterable v-model="addressForm.address1"></el-cascader>
            </el-form-item>

            <el-form-item label="详细地址" prop="address2">
                <el-input v-model="addressForm.address2"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showBox = false">取 消</el-button>
            <el-button type="primary" @click="editorAddress">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 物流信息的详情的对话框 -->
        <el-dialog
        title="物流详细"
        :visible.sync="wuliuShowBox"
        width="50%">
        <!-- <span>物流详情</span> -->
        <!-- 时间线 组件 -->
        <el-timeline :reverse="false">
            <el-timeline-item
            v-for="(activity, index) in wuLiuList"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
            </el-timeline-item>
        </el-timeline>
        <!-- <i class="iconfont icon-users" @click="aaa"></i> -->
        </el-dialog>

    </div>
</template>

<script>
import Breadcrumb from "../../components/Breadcrumb"
import {getOrderList,getWuliu} from "../../api/order"
import cityDate from "./citydata.js"
    export default {
        components:{
            Breadcrumb
        },
        data(){
            return{
                breadcrumba:'',
                breadcrumbb:'',
                ordersInfo:{
                    pagenum:1,
                    pagesize:5
                },
                total:0,
                query:'',
                orderList:[],
                showBox:false,
                addressForm:{
                    address1:[],
                    address2:''
                },
                addressFormRules:{
                    address1:[
                         { required: true, message: '请选择省市区/县', trigger: 'blur' },
                    ],
                    address2:[
                         { required: true, message: '请填写详细地址', trigger: 'blur' },
                    ],
                },
                cityDate:cityDate,
                wuliuShowBox:false,
                wuLiuList:[
                    {
                        "time": "2018-05-10 09:39:00",
                        "ftime": "2018-05-10 09:39:00",
                        "context": "已签收,感谢使用顺丰,期待再次为您服务",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 08:23:00",
                        "ftime": "2018-05-10 08:23:00",
                        "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 07:32:00",
                        "ftime": "2018-05-10 07:32:00",
                        "context": "快件到达 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-10 02:03:00",
                        "ftime": "2018-05-10 02:03:00",
                        "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 23:05:00",
                        "ftime": "2018-05-09 23:05:00",
                        "context": "快件到达 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 21:21:00",
                        "ftime": "2018-05-09 21:21:00",
                        "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 13:07:00",
                        "ftime": "2018-05-09 13:07:00",
                        "context": "顺丰速运 已收取快件",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:25:03",
                        "ftime": "2018-05-09 12:25:03",
                        "context": "卖家发货",
                        "location": ""
                    },
                    {
                        "time": "2018-05-09 12:22:24",
                        "ftime": "2018-05-09 12:22:24",
                        "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                        "location": ""
                    },
                    {
                        "time": "2018-05-08 21:36:04",
                        "ftime": "2018-05-08 21:36:04",
                        "context": "商品已经下单",
                        "location": ""
                    }
                ]
            }
        },
        created(){
            this.breadcrumba=sessionStorage.getItem('breadcrumba')
            this.breadcrumbb=sessionStorage.getItem('breadcrumbb')
            this.getOrderList()
        },
        methods:{
                async getOrderList(){
                    let {data:res} = await getOrderList(this.ordersInfo)
                    console.log(res,"获取订单列表的返回值");

                    if(res.meta.status !== 200){
                        return this.$message.error('获取订单列表失败！')
                    }

                    this.total = res.data.total
                    this.orderList = res.data.goods
                },
                // 新的条数
                handleSizeChange(newPagesize) {
                    // console.log(`每页 ${val} 条`);
                    this.ordersInfo.pagesize = newPagesize
                    this.getOrderList()
                },
                // 新的当前页
                handleCurrentChange(newPagenum) {
                    // console.log(`当前页: ${val}`);
                    this.ordersInfo.pagenum = newPagenum
                    this.getOrderList()
                },
                // 编辑 订单信息 先获取单个的订单数据 渲染到 弹出框的 form表单里 然后 点击确定进行更改
                // 先 接获取 单个订单的数据接口 再用更改 订单数据的接口

                // 这个接口 写的是 省市联动效果的 弹出框
                orderEditor(row){
                    // console.log(row);
                    this.showBox = true
                },
                // 关闭 弹出框 执行 清理 form 表单
                addressDialogClose(){
                    // console.log(this,"thisssssss");
                    this.$refs.addressFormRef.resetFields()  
                },
                editorAddress(){
                    console.log(this.addressForm.address1,"地址");
                },
                // 查看物流信息  这个接口  不好用了
                async showProgressBox(row){
                    console.log(row);
                    this.wuliuShowBox = true
                    // let id = 804909574412544580
                    // let id = 1106975712662
                    // let {data:res} = await getWuliu(id)
                    // console.log(res,"获取物流信息");
                },
                // aaa(){
                //     console.log(111);
                // }
            }
    }
</script>

<style lang="less" scoped>
    .el-card{
        margin-top: 15px;
    }
    .el-table{
        margin-top:15px ;
    }
    .el-pagination{
        margin-top: 15px;   
         
    }
</style>